<script lang="ts" setup>
    import { ref,reactive } from 'vue'

    let name=ref("zs")
    //类型“number”的参数不能赋给类型“object”的参数。
    // reactive不可以包装基本类型,不用.value
    // let age=reactive(20)1

    let car =ref({
        brand:"bench",
        color:"red"
    })
    let person=reactive({name:"zs",age:19})
    function changeCar(){
        car.value.brand="audi"
    }
    function changePerson(){
        person.name="王五"
    } 
    
</script>

<template>

    <h3>{{ name }}</h3>  <!-- a -->
    <h4>{{ car.brand }}---{{ car.color }}</h4>
    <button @click="changeCar">changeCar</button>
    <hr>
    <div>{{ person.name }}--{{ person.age }}</div>
    <button @click="changePerson">changePerson</button>

</template>

<style scoped>
button{
    margin-bottom: 10px;
}
.my_border1{
    border:1px solid red
}
.my_border2{
    background-color: burlywood;
}
</style>
